<template>
  <div class="hai row height900">
    <div class="center">
      <div class="bga-1 left-1 col"></div>
      <div class="bga-1 left-2 col">
        <img
          class="img-1 imgs"
          src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/money.png"
          alt
        >
      </div>
      <div class="bga-1 left-3 col">
        <div class="money-1"></div>
        <div class="money-2"></div>
      </div>
      <div class="bga-1 left-4 col">
        <img
          class="img-2 imgs"
          src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/money.png"
          alt
        >
      </div>
      <div class="col bga-1 left-5"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style scoped>
.center {
  width: 750px;
  margin: 0 auto;
  display: flex;
}
.hai {
  background: #2f81f1;
  /* background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/part1.png"); */
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/background-3.png);
  background-repeat: no-repeat;
  background-position: center;
}
.height900 {
  height: 900px;
  min-width: 1200px;
}
.bga-1 {
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/light-1.png);
  animation-name: activebag;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate-reverse;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes activebag {
  0% {
    background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/light-1.png);
    opacity: 1;
  }
  100% {
    background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/last-light.png);
    opacity: 0.1;
  }
}
.left-1 {
  margin-top: 450px;
  height: 120px;
  background-position-x: 55px;
}
.left-2 {
  margin-top: 260px;
  height: 150px;
  background-position-x: 20px;
}
.left-3 {
  margin-top: 125px;
  height: 235px;
  background-position-x: 27px;
  position: relative;
}
.left-4 {
  margin-right: -3px;
  margin-top: 243px;
  height: 150px;
  background-position-x: 106px;
}
.left-5 {
  margin-top: 435px;
  height: 120px;
  background-position-x: 65px;
}
.imgs {
  animation-name: margintop;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate-reverse;
  opacity: 1;
}
@keyframes margintop {
  0% {
    margin-top: 100px;
  }
  0% {
    margin-top: 80px;
  }
}
.img-1 {
  margin-left: 15px;
  margin-top: 100px;
}
.img-2 {
  margin-left: 100px;
  margin-top: 100px;
}
.money-1 {
  width: 31px;
  height: 53px;
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/money-1.png);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 45px;
  top: 140px;
  animation-name: xuanzhuan;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-direction: alternate-reverse;
  animation-timing-function: ease;
}

.money-2 {
  width: 31px;
  height: 53px;
  left: 45px;
  top: 140px;
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/money-2.png);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  animation-name: xuanzhuan;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in;
}
@keyframes xuanzhuan {
  0% {
    transform: rotateY(0deg);
    top: 130px;
  }
  100% {
    transform: rotateY(360deg);
    top: 150px;
  }
}
</style>
